<!DOCTYPE html>
<html>
<head>
    <title>春日❀魔方</title>
    <meta charset="utf-8" />
    <!-- <link rel="shortcut icon" href="img1/img.jpg" /> -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background: radial-gradient(rgb(240, 110, 110), rgb(60, 172, 221));
        }
        @media screen and (min-width: 768px) {
            body {
                background: radial-gradient(rgb(84, 164, 191), rgb(233, 196, 202));
            }
        }
        @media screen and (min-width: 992px) {
            body {
                background: radial-gradient(rgb(143, 84, 191), rgb(225, 238, 109));
            }
        }
        @media screen and (min-width: 1200px) {
            /*body {*/
            /*	background-image: url('../img/010.jpg');*/
            /*}*/
        }

        .container {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            perspective: 20000px;
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid transparent;
            box-sizing: border-box;
            position: relative;
            transform-style: preserve-3d;
            /*transform:rotateX(30deg) rotateY(30deg);*/
            animation: rotate 10s linear infinite;
        }
        @keyframes rotate {
            100% {
                transform: rotatex(360deg) rotatey(360deg) rotatez(360deg);
            }
        }

        .box-page {
            width: 300px;
            height: 300px;
            position: absolute;
            box-sizing: border-box;
            transform-style: preserve-3d;
        }

        .top {
            transform: translateZ(150px);
        }
        .bottom {
            transform: translateZ(-150px) rotateX(180deg);
        }
        .right {
            transform: translateX(150px) rotateY(90deg);
        }
        .left {
            transform: translateX(-150px) rotateY(-90deg);
        }
        .after {
            transform: translateY(-150px) rotateX(90deg);
        }
        .before {
            transform: translateY(150px) rotateX(-90deg);
        }

        .box-page div:first-child,
        .box-page div:nth-child(3),
        .box-page div:nth-child(5),
        .box-page div:nth-child(7),
        .box-page div:nth-child(9) {
            transform: rotateY(0deg);
            animation: rotatey 6s linear infinite;
        }

        /*@keyframes rotatey {*/
        /*	20% {*/
        /*		!* background-image: url('https://imgur.la/images/2024/06/05/3.th.png'); *!*/
        /*		transform: rotateY(0deg);*/
        /*		background-size: 300px 300px;*/
        /*	}*/
        /*	40% {*/
        /*		background-image: url('../img/010.jpg');*/
        /*		transform: rotateY(540deg);*/
        /*		background-size: 100px 100px;*/
        /*	}*/
        /*	60% {*/
        /*		background-image: url('../img/010.jpg');*/
        /*		transform: rotateY(540deg);*/
        /*		background-size: 100px 100px;*/
        /*	}*/
        /*	80% {*/
        /*		!* background-image: url('https://imgur.la/images/2024/06/05/3.th.png'); *!*/
        /*		transform: rotateY(0deg);*/
        /*		background-size: 300px 300px;*/
        /*	}*/
        /*}*/

        .box-page div:nth-child(2),
        .box-page div:nth-child(4),
        .box-page div:nth-child(6),
        .box-page div:nth-child(8) {
            transform: rotateX(0deg);
            animation: rotatex 6s linear infinite;
        }

        @keyframes rotatex {
            20% {
                /* background-image: url('https://imgur.la/images/2024/06/05/3.th.png'); */
                transform: rotateX(0deg);
                background-size: 300px 300px;
            }
            40% {
                /*background-image: url('../img/010.jpg');*/
                transform: rotateX(540deg);
                background-size: 100px 100px;
            }
            60% {
                /*background-image: url('../img/010.jpg');*/
                transform: rotateX(540deg);
                background-size: 100px 100px;
            }
            80% {
                /* background-image: url('https://imgur.la/images/2024/06/05/3.th.png'); */
                transform: rotateX(0deg);
                background-size: 300px 300px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="top box-page"></div>
        <div class="bottom box-page"></div>
        <div class="left box-page"></div>
        <div class="right box-page"></div>
        <div class="before box-page"></div>
        <div class="after box-page"></div>
    </div>
</div>
<script type="text/javascript">
    var arr = document.querySelectorAll('.box>div')
    var url = [
        '../img/we1.jpg',
        '../img/we2.jpg',
        '../img/we7.jpg',
        '../img/we8.jpg',
        '../img/we9.jpg',
        '../img/we11.jpg',
        '../img/we10.jpg',
        '../img/we13.jpg',
    ]
    for (var n = 0; n < arr.length; n++) {
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                var divs = document.createElement('div')
                divs.style.cssText =
                    'width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(' +
                    url[n] +
                    ');background-size: 300px 300px;'
                arr[n].appendChild(divs)

                // 改变每一个div的位置
                divs.style.left = 100 * j + 'px'
                divs.style.top = 100 * i + 'px'

                // 改变背景图相应的位置
                divs.style.backgroundPositionX = -j * 100 + 'px'
                divs.style.backgroundPositionY = -i * 100 + 'px'
            }
        }
    }
</script>
<audio src="../music/1.mp3" autoplay="autoplay" loop="loop">

    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery.fullPage.min.js"></script>
    <script src="../js/diy.js"></script>
</audio>
</body>
</html>
